<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fe14</title>
    <style>
        .done {
            color: lightgray;
            text-decoration: line-through;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <!--    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>-->
    <script src="juranAlert.js"></script>
    <script>
        $('document').ready(function () {
            //场景2：
            // JuranAlert2('注意', '这是一个弹窗', function (r) {
            //     console.log('按钮回调', r)
            // })
            //场景3
            // JuranPrompt('请输入 todo', function (clickOk, input) {
            //     console.log(clickOk, input)
            //     if (clickOk){
            //         console.log(input)
            //     }
            // })
            //场景4：
            var actions = [
                '现在更新',
                '今晚更新',
                '明天更新',
                '永远不更新(那是不可能的)',
                '滚',
            ]
            JuranActions('选择更新时间', actions, function (index) {
                console.log(index)
            })
        })
    </script>
    <style media="screen">
        .vertical-center {
            top: 50%;
            position: relative;
            transform: translateY(-50%);
        }

        .juran-slider {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .juran-slider-images {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .juran-slider-button {
            position: absolute;
        }

        .juran-slider-button-left {
            left: 0;
        }

        .juran-slider-button-right {
            right: 0;
        }

        .juran-slider-img {
            display: none;
        }

        /*非常重要*/
        .juran-slider-active {
            display: block;
        }

        .juran-slider-indicators {
            bottom: 20px;
            position: relative;
            text-align: center;
        }

        .juran-slider-i {
            display: inline-block;
            background: darkblue;
            color: white;
            border-radius: 50%;
            padding: 0 5px
        }

        .juran-slider-i-active {
            background: red;
        }
    </style>
</head>
<body>
<div class="juran-slider">
    <div class="juran-slider-images" data-active="0" data-imgs="3">
        <!--class同名，保证同类   -->
        <img class="juran-slider-img juran-slider-active" src="1.gif" alt=""/>
        <img class="juran-slider-img" src="2.jpg" alt=""/>
        <img class="juran-slider-img" src="3.jpg" alt=""/>
        <button class="juran-slider-button juran-slider-button-left vertical-center" type="button">上</button>
        <button class="juran-slider-button juran-slider-button-right vertical-center" type="button">下</button>
    </div>
    <div class="juran-slider-indicators">
        <div class="juran-slider-i juran-slider-i-active">1</div>
        <div class="juran-slider-i">2</div>
        <div class="juran-slider-i">3</div>
    </div>
</div>
</body>
<script>
    var play = function (offset) {
        var activeIndex = $('.juran-slider-images').data('active')
        var numberOfImgs = $('.juran-slider-images').data('imgs')
        var i = (activeIndex + numberOfImgs + offset) % numberOfImgs
        $('.juran-slider-images').data('active', i)
        $('.juran-slider-active').fadeOut()
        $('.juran-slider-active').removeClass('juran-slider-active')
        var active = $($('.juran-slider-img')[i])
        active.addClass('juran-slider-active')
        active.fadeIn()
        //改变指示器
        $('.juran-slider-i-active').removeClass('juran-slider-i-active')
        var activeIndicator = $($('.juran-slider-i')[i])
        activeIndicator.addClass('.juran-slider-i-active')
    }

    var playPrev = function () {
        play(-1)
    }
    var playNext = function () {
        play(1)
    }

    $('.juran-slider-button').on('click', function (event) {
        var button = $(event.target)
        if (button.hasClass('juran-slider-button-left')) {
            playPrev()
        } else {
            playNext()
        }
    })

</script>
</html>